<script src="/resources/frontend/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="/resources/frontend/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js"></script>
<style>
.nav-tabs>li>a {
    margin-right: 0;
    border: none;
	text-align: center;
    color: #445;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #F11;
    background-color: #fff;
    border: none;
    border-bottom: solid 3px #F11;
}
.bonus-list {
	padding: 10px;
}
.bonus-list li{
	padding: 6px 0 6px 35px;
	background-image: url('/resources/frontend/images/rmb-circle-red.png');
	background-repeat: no-repeat;
	background-position: 2px center; 
	height: 52px;
	border-bottom: solid 1px #ddd;
}
.datepicker-months, .datepicker-years, .datepicker-decades, .datepicker-centuries {
	height: 220px;
	overflow-y: auto;
}
.datepicker-months .month, .datepicker-years .year, .datepicker-decades .decade, .datepicker-centuries .century {
	font-size: 16px;
	padding: 5px 5px;
	display: block;
}
.nav-tabs>li>a {
    border-radius: 8px 8px 0 0;
}
</style>

<div id="wrap" style="padding: 5px 12px 12px 12px; background-image: url('/resources/frontend/images/bg-bonus.png'); background-repeat: no-repeat; background-size: 100% 100%; min-height: 100%;">
    <img id="tou-img" src="/resources/frontend/images/bg-bonus-1.png" style="margin: 5px 5px 3px -10px;" />

    <div style="background-color: #fff; border-radius: 8px;">
        <ul id="bonus-tab" class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active" style="width: 50%;"><a href="#get" aria-controls="get" role="tab" data-toggle="tab">红包收入</a></li>
            <li role="presentation" style="width: 50%;"><a href="#use" aria-controls="use" role="tab" data-toggle="tab">红包支出</a></li>
        </ul>
        
        <div class="tab-content" style="overflow: hidden;">
            <div role="tabpanel" class="tab-pane active" id="get">
                <div id="pane-p1" style="float: right">
                    <i class="glyphicon glyphicon-menu-down" style="float: right; font-size: 12px; margin: 5px 5px 0 0; color: #444;"></i>
                    <input his-type="get" class="dtpick" type="text" value="<?php echo date('Y年m月'); ?>" readonly style="float: right; outline: none !important; border:none !important; width: 74px; margin: 2px 5px 0 0; color: #444;" />
                </div>
                
                <div class="content" style="overflow-y: auto; float: right; width: 100%;"></div>
            </div>
            <div role="tabpanel" class="tab-pane" id="use">
                <div id="pane-p1" style="float: right">
                    <i class="glyphicon glyphicon-menu-down" style="float: right; font-size: 12px; margin: 5px 5px 0 0; color: #444;"></i>
                    <input his-type="use" class="dtpick" type="text" value="<?php echo date('Y年m月'); ?>" readonly style="float: right; outline: none !important; border:none !important; width: 74px; margin: 2px 5px 0 0; color: #444;" />
                </div>
                    
                <div class="content" style="overflow-y: auto; float: right; width: 100%;"></div>
            </div>
        </div>
    </div>
</div>

<script>
	$(document).ready(function(){
		var wrapH = $(window).height() - 20;
		$('.content').height(wrapH - $('#tou-img').outerHeight() - $('.nav-tabs').outerHeight() - $('#pane-p1').outerHeight() - 5);

		$('.dtpick').focus(function(){
	        document.activeElement.blur();
	    });
		
		$('.dtpick').each(function(k, dtpick){
			$(dtpick).datepicker({
				format: 'yyyy年mm月', 
				language: 'zh-CN', 
			    startView: 1,
			    minViewMode: 1
			}).on('changeMonth', function(e){
				if(typeof(e.date) == 'undefined'){
					ym = $(dtpick).val();
				}else{
					ym = new Date(e.date).getFullYear() + '-' + (new Date(e.date).getMonth()+1);
				}

				$.ajax({
					type: 'get', 
					url: '/pay/bonushis', 
					data: {
						ym: ym, 
						type: $(dtpick).attr('his-type')
					}, 
					success: function(ret){
						$(dtpick).parent().siblings('.content').html(ret);
					}, 
					dataType: 'html'
				});
			}).trigger('changeMonth');
		});
		
        $('#bonus-tab a').on('click', function(e) {
            e.preventDefault();
            $(this).tab('show');
        });
	});
</script>